<template>
  <div class="clothing-material-container">
    <div class="page-header">
      <h2>服装材质</h2>
      <p>选择高品质的面料材质，打造舒适与品质兼具的定制服装</p>
      
      <div class="filter-container">
        <el-input
          v-model="searchQuery"
          placeholder="搜索材质名称"
          clearable
          class="filter-item"
          @clear="handleFilter"
          @input="handleFilter"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="categoryFilter" placeholder="选择类别" clearable class="filter-item" @change="handleFilter">
          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        
        <el-slider
          v-model="priceRange"
          range
          :min="0"
          :max="1000"
          :step="50"
          :marks="priceMarks"
          class="price-slider"
          @change="handleFilter"
        />
      </div>
    </div>
    
    <el-row :gutter="20" class="material-grid">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="material in filteredMaterials" :key="material.id" class="material-item-col">
        <el-card class="material-card" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="material-image-container" @click="viewMaterialDetail(material)">
            <el-image :src="material.imageUrl" fit="cover" class="material-image" />
            <div class="material-overlay">
              <el-button type="primary" size="small" round>查看详情</el-button>
            </div>
          </div>
          <div class="material-info">
            <div class="material-name">{{ material.name }}</div>
            <div class="material-category">{{ material.category }}</div>
            <div class="material-price">¥{{ material.price }}/米</div>
            <div class="material-tags">
              <el-tag size="small" type="success" v-if="material.isOrganic">有机</el-tag>
              <el-tag size="small" type="info" v-if="material.isImported">进口</el-tag>
              <el-tag size="small" type="warning" v-if="material.isLimited">限量</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-empty v-if="filteredMaterials.length === 0" description="暂无匹配的材质" />
    
    <!-- 材质详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="材质详情"
      width="750px"
      destroy-on-close
    >
      <div class="material-detail" v-if="currentMaterial">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="material-detail-images">
              <el-image :src="currentMaterial.imageUrl" fit="cover" class="main-image" />
              <div class="swatch-container">
                <span class="swatch-title">可选颜色:</span>
                <div class="swatch-list">
                  <div 
                    v-for="(color, index) in currentMaterial.colors" 
                    :key="index" 
                    class="swatch-item" 
                    :style="{backgroundColor: color.code}"
                    :class="{ active: selectedColor === index }"
                    @click="selectedColor = index"
                  >
                    <el-tooltip :content="color.name" placement="top">
                      <div class="swatch-inner"></div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="material-detail-info">
              <h3 class="material-detail-name">{{ currentMaterial.name }}</h3>
              <el-divider />
              <div class="material-detail-item">
                <span class="label">类别:</span>
                <span class="value">{{ currentMaterial.category }}</span>
              </div>
              <div class="material-detail-item">
                <span class="label">价格:</span>
                <span class="value price">¥{{ currentMaterial.price }}/米</span>
              </div>
              <div class="material-detail-item">
                <span class="label">成分:</span>
                <span class="value">{{ currentMaterial.composition }}</span>
              </div>
              <div class="material-detail-item">
                <span class="label">宽度:</span>
                <span class="value">{{ currentMaterial.width }}cm</span>
              </div>
              <div class="material-detail-item">
                <span class="label">重量:</span>
                <span class="value">{{ currentMaterial.weight }}g/㎡</span>
              </div>
              <div class="material-detail-item">
                <span class="label">产地:</span>
                <span class="value">{{ currentMaterial.origin }}</span>
              </div>
              <div class="material-detail-item">
                <span class="label">库存:</span>
                <span class="value">{{ currentMaterial.stock }}米</span>
              </div>
              <el-divider />
              <div class="material-detail-desc">
                <h4>材质描述</h4>
                <p>{{ currentMaterial.description }}</p>
              </div>
              <div class="material-detail-features">
                <h4>特点</h4>
                <ul>
                  <li v-for="(feature, index) in currentMaterial.features" :key="index">{{ feature }}</li>
                </ul>
              </div>
              <div class="material-detail-care">
                <h4>洗涤保养</h4>
                <p>{{ currentMaterial.care }}</p>
              </div>
              <div class="material-detail-actions">
                <el-button type="primary" @click="useThisMaterial">使用此材质</el-button>
                <el-button type="success" @click="requestSample">申请样品</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'ClothingMaterial',
  components: {
    Search
  },
  setup() {
    const router = useRouter()
    
    // 筛选条件
    const searchQuery = ref('')
    const categoryFilter = ref('')
    const priceRange = ref([0, 500])
    
    // 价格标记
    const priceMarks = {
      0: '¥0',
      250: '¥250',
      500: '¥500',
      750: '¥750',
      1000: '¥1000'
    }
    
    // 类别选项
    const categoryOptions = [
      { value: '棉麻类', label: '棉麻类' },
      { value: '毛呢类', label: '毛呢类' },
      { value: '丝绸类', label: '丝绸类' },
      { value: '针织类', label: '针织类' },
      { value: '化纤类', label: '化纤类' }
    ]
    
    // 材质数据
    const materialList = ref([
      {
        id: 1,
        name: '优质埃及长绒棉',
        category: '棉麻类',
        price: 180,
        composition: '100% 埃及长绒棉',
        width: 145,
        weight: 180,
        origin: '埃及',
        stock: 500,
        description: '优质埃及长绒棉，柔软舒适，吸汗透气，适合各类衬衫和T恤。纤维长度超过34mm，手感顺滑，色泽柔和。',
        imageUrl: 'https://via.placeholder.com/400x300?text=埃及棉',
        colors: [
          { name: '纯白', code: '#FFFFFF' },
          { name: '象牙白', code: '#FFFEF2' },
          { name: '浅蓝', code: '#E6F2FF' },
          { name: '粉红', code: '#FFE8E8' },
          { name: '薄荷绿', code: '#E8F6E8' }
        ],
        features: ['柔软舒适', '吸汗透气', '耐洗耐穿', '色彩柔和'],
        care: '建议30℃以下冷水手洗或机洗，不可漂白，中温熨烫，不可干洗。',
        isOrganic: true,
        isImported: true,
        isLimited: false
      },
      {
        id: 2,
        name: '精选羊毛呢',
        category: '毛呢类',
        price: 280,
        composition: '85% 羊毛，15% 聚酯纤维',
        width: 150,
        weight: 320,
        origin: '英国',
        stock: 300,
        description: '精选英国羊毛制成，质地柔软又挺括，保暖性极佳，适合制作高档西装外套。表面略有质感，穿着挺括有型。',
        imageUrl: 'https://via.placeholder.com/400x300?text=羊毛呢',
        colors: [
          { name: '深灰', code: '#444444' },
          { name: '海军蓝', code: '#24385E' },
          { name: '酒红', code: '#722F37' },
          { name: '驼色', code: '#C8B097' },
          { name: '黑色', code: '#1A1A1A' }
        ],
        features: ['保暖性好', '挺括有型', '耐磨耐用', '抗皱性优'],
        care: '建议干洗，不可机洗，低温熨烫，避免暴晒。',
        isOrganic: false,
        isImported: true,
        isLimited: false
      },
      {
        id: 3,
        name: '桑蚕丝绸',
        category: '丝绸类',
        price: 350,
        composition: '100% 桑蚕丝',
        width: 110,
        weight: 75,
        origin: '中国江苏',
        stock: 200,
        description: '采用优质桑蚕丝制成，质地光滑细腻，手感柔软，具有良好的透气性和吸湿性，适合制作高档衬衫、连衣裙等。',
        imageUrl: 'https://via.placeholder.com/400x300?text=桑蚕丝',
        colors: [
          { name: '纯白', code: '#FFFFFF' },
          { name: '香槟金', code: '#F5E8C1' },
          { name: '玫瑰粉', code: '#FADADD' },
          { name: '宝蓝', code: '#4E7AB5' },
          { name: '墨绿', code: '#2B4C3F' }
        ],
        features: ['柔软顺滑', '光泽感强', '透气吸湿', '触感凉爽'],
        care: '建议手洗或干洗，水温不超过30℃，不可拧干，避免阳光直射。',
        isOrganic: true,
        isImported: false,
        isLimited: true
      },
      {
        id: 4,
        name: '精梳纯棉针织',
        category: '针织类',
        price: 120,
        composition: '100% 精梳棉',
        width: 160,
        weight: 200,
        origin: '中国新疆',
        stock: 800,
        description: '采用新疆长绒棉精梳而成，手感柔软，弹性好，透气性强，适合制作T恤、卫衣等休闲服饰。',
        imageUrl: 'https://via.placeholder.com/400x300?text=针织棉',
        colors: [
          { name: '白色', code: '#FFFFFF' },
          { name: '黑色', code: '#1A1A1A' },
          { name: '灰色', code: '#9C9C9C' },
          { name: '藏青', code: '#1C2C4A' },
          { name: '酒红', code: '#722F37' }
        ],
        features: ['柔软舒适', '弹性优良', '透气性好', '耐穿耐洗'],
        care: '建议40℃以下温水手洗或机洗，避免使用漂白剂，中温熨烫。',
        isOrganic: true,
        isImported: false,
        isLimited: false
      },
      {
        id: 5,
        name: '高密度涤纶',
        category: '化纤类',
        price: 85,
        composition: '100% 涤纶',
        width: 150,
        weight: 120,
        origin: '中国浙江',
        stock: 1000,
        description: '高密度涤纶面料，防水透气，适合制作户外运动服装、冲锋衣等。质地轻盈，强度高，耐磨损。',
        imageUrl: 'https://via.placeholder.com/400x300?text=涤纶',
        colors: [
          { name: '黑色', code: '#1A1A1A' },
          { name: '深蓝', code: '#1F3A93' },
          { name: '军绿', code: '#4A5D23' },
          { name: '灰色', code: '#9C9C9C' },
          { name: '红色', code: '#B22222' }
        ],
        features: ['防水透气', '轻盈耐用', '耐磨损', '快干性能好'],
        care: '可机洗或手洗，中温烘干，不需熨烫，避免接触尖锐物体。',
        isOrganic: false,
        isImported: false,
        isLimited: false
      },
      {
        id: 6,
        name: '高支亚麻',
        category: '棉麻类',
        price: 220,
        composition: '100% 亚麻',
        width: 140,
        weight: 180,
        origin: '比利时',
        stock: 350,
        description: '采用比利时优质亚麻纤维织造，透气性极佳，吸湿排汗，越洗越软，适合制作夏季休闲衬衫、裤装等。',
        imageUrl: 'https://via.placeholder.com/400x300?text=亚麻',
        colors: [
          { name: '原色', code: '#E8E2D6' },
          { name: '白色', code: '#FFFFFF' },
          { name: '卡其', code: '#C3B091' },
          { name: '藏青', code: '#1C2C4A' },
          { name: '墨绿', code: '#2B4C3F' }
        ],
        features: ['透气凉爽', '吸湿排汗', '越洗越软', '自然质感'],
        care: '建议手洗或机洗，冷水洗涤，不可漂白，中温熨烫。',
        isOrganic: true,
        isImported: true,
        isLimited: false
      }
    ])
    
    // 筛选后的数据
    const filteredMaterials = computed(() => {
      let result = materialList.value
      
      if (searchQuery.value) {
        result = result.filter(item => 
          item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
      }
      
      if (categoryFilter.value) {
        result = result.filter(item => item.category === categoryFilter.value)
      }
      
      if (priceRange.value) {
        result = result.filter(item => 
          item.price >= priceRange.value[0] && item.price <= priceRange.value[1]
        )
      }
      
      return result
    })
    
    // 筛选处理
    const handleFilter = () => {
      // 如果需要调用API，这里可以添加API调用逻辑
    }
    
    // 材质详情
    const dialogVisible = ref(false)
    const currentMaterial = ref(null)
    const selectedColor = ref(0)
    
    const viewMaterialDetail = (material) => {
      currentMaterial.value = material
      selectedColor.value = 0
      dialogVisible.value = true
    }
    
    // 使用此材质
    const useThisMaterial = () => {
      router.push({
        path: '/custom/submit',
        query: { 
          materialId: currentMaterial.value.id,
          colorIndex: selectedColor.value
        }
      })
      dialogVisible.value = false
      ElMessage.success('已选择该材质，请继续完成定制')
    }
    
    // 申请样品
    const requestSample = () => {
      ElMessage.success('样品申请已提交，我们会尽快处理')
      dialogVisible.value = false
    }
    
    // 初始化
    onMounted(() => {
      // 可以在这里调用API获取材质数据
    })
    
    return {
      searchQuery,
      categoryFilter,
      priceRange,
      priceMarks,
      categoryOptions,
      materialList,
      filteredMaterials,
      handleFilter,
      dialogVisible,
      currentMaterial,
      selectedColor,
      viewMaterialDetail,
      useThisMaterial,
      requestSample
    }
  }
}
</script>

<style scoped>
.clothing-material-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.filter-container {
  display: flex;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-item {
  width: 200px;
}

.price-slider {
  width: 100%;
  max-width: 500px;
  margin-top: 20px;
}

.material-grid {
  margin-bottom: 24px;
}

.material-item-col {
  margin-bottom: 20px;
}

.material-card {
  transition: all 0.3s;
  height: 100%;
}

.material-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.material-image-container {
  position: relative;
  overflow: hidden;
}

.material-image {
  width: 100%;
  height: 220px;
  display: block;
  transition: transform 0.5s;
}

.material-image-container:hover .material-image {
  transform: scale(1.05);
}

.material-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.material-image-container:hover .material-overlay {
  opacity: 1;
}

.material-info {
  padding: 14px;
}

.material-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

.material-category {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.material-price {
  font-size: 14px;
  font-weight: 500;
  color: #f56c6c;
  margin-bottom: 8px;
}

.material-tags {
  display: flex;
  gap: 6px;
}

/* 材质详情 */
.material-detail-images {
  margin-bottom: 20px;
}

.main-image {
  width: 100%;
  height: 300px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.swatch-container {
  margin-top: 10px;
}

.swatch-title {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.swatch-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.swatch-item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #eee;
  position: relative;
  transition: all 0.3s;
}

.swatch-item:hover {
  transform: scale(1.1);
}

.swatch-item.active {
  border: 2px solid #409EFF;
}

.swatch-item.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
}

.swatch-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.material-detail-name {
  font-size: 20px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 16px;
}

.material-detail-item {
  margin-bottom: 10px;
  display: flex;
}

.material-detail-item .label {
  font-weight: 500;
  width: 80px;
  color: #666;
}

.material-detail-item .price {
  color: #f56c6c;
  font-weight: 500;
}

.material-detail-desc,
.material-detail-features,
.material-detail-care {
  margin-bottom: 16px;
}

.material-detail-desc h4,
.material-detail-features h4,
.material-detail-care h4 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 8px;
}

.material-detail-desc p,
.material-detail-care p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.material-detail-features ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
}

.material-detail-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style> 